<template>
	<view class="user">
		<view class="user-top">
			<view class="msg flex">
				<navigator url="/pages/user/message" hover-class="none" class="right">
					<view class="iconfont iconxiaoxi"></view>
					<view class="dot"></view>
				</navigator>
			</view>
			<view class="user-msg flex">
				<navigator url="/pages/user/myData" hover-class="none" class="avatar">
					<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
				</navigator>
				<view class="tel">13243161550</view>
			</view>
			<view class="top-bottom flex-around">
				<view>
					<view class="h3">300.00</view>
					<view class="p">钱包(元)</view>
				</view>
				<view>
					<view class="h3">300.00</view>
					<view class="p">欠款(元)</view>
				</view>
				<view>
					<view class="h3">3</view>
					<view class="p">优惠券(张)</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title flex-between">
				我的订单
				<navigator url="/pages/user/orders?type=0" class="right flex">
					全部订单
					<view class="iconfont iconyoujiantou1"></view>
				</navigator>
				
			</view>
			<view class="flex-between orders">
				<navigator url="/pages/user/orders?type=1" hover-class="none" class="order-item">
					<view class="iconfont iconicon-test"></view>
					<view class="p">待付款</view>
				</navigator>
				<navigator url="/pages/user/orders?type=2" hover-class="none" class="order-item">
					<view class="iconfont icondaifahuo"></view>
					<view class="p">待发货</view>
				</navigator>
				<navigator url="/pages/user/orders?type=3" hover-class="none" class="order-item">
					<view class="iconfont icondaishouhuo"></view>
					<view class="p">待收货</view>
				</navigator>
				<navigator url="/pages/user/orders?type=4" hover-class="none" class="order-item">
					<view class="iconfont iconicon-test1"></view>
					<view class="p">待评价</view>
				</navigator>
				<navigator url="/pages/user/orders?type=5" hover-class="none" class="order-item">
					<view class="iconfont iconshouhoufuwu"></view>
					<view class="p">售后服务</view>
				</navigator>
			</view>
		</view>
		<view class="card">
			<view class="title flex">
				常用工具
			</view>
			<view class="tools flex">
				<navigator url="/pages/user/addrList" hover-class="none" class="tool-item">
					<view class="iconfont icondizhiguanli"></view>
					<view class="p">地址管理</view>
				</navigator>
				<navigator url="/pages/user/goodConfirm" hover-class="none" class="tool-item">
					<view class="iconfont iconicon-"></view>
					<view class="p">收货确认单</view>
				</navigator>
				<navigator url="/pages/user/historyOrder" hover-class="none" class="tool-item">
					<view class="iconfont iconwodezhangdan"></view>
					<view class="p">我的账单</view>
				</navigator>
				<navigator url="/pages/user/Invoice" hover-class="none" class="tool-item">
					<view class="iconfont iconfapiao"></view>
					<view class="p">我的发票</view>
				</navigator>
				<navigator url="/pages/user/sendGoods" hover-class="none" class="tool-item">
					<view class="iconfont icondaishouhuo"></view>
					<view class="p">我要寄送</view>
				</navigator>
				<navigator url="/pages/user/setting" hover-class="none" class="tool-item">
					<view class="iconfont iconAccount-Settings"></view>
					<view class="p">账号设置</view>
				</navigator>
			</view>
		</view>
		<view class="card">
			<view class="title flex">
				帮助中心
			</view>
			<view class="tools flex">
				
				<navigator url="/pages/user/question" hover-class="none" class="tool-item">
					<view class="iconfont iconchangjianwenti"></view>
					<view class="p">常见问题</view>
				</navigator>
				<view class="tool-item" @click="kehu">
					<view class="iconfont iconkefu"></view>
					<view class="p">在线客服</view>
				</view>
				<navigator url="/pages/user/aboutUs" hover-class="none" class="tool-item">
					<view class="iconfont iconguanyu"></view>
					<view class="p">关于我们</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			kehu(){
				uni.makePhoneCall({
					phoneNumber:"110"
				})
			}
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	.user{
		padding-bottom: 50rpx;
		.user-top{
			height: 360rpx;
			background: @main-color;
			padding: 24px 30rpx 0;
			.msg{
				justify-content: flex-end;
				height: 44px;
				
				.right{
					position: relative;
					.dot{
						position: absolute;
						right:0;
						top:0;
						width: 20rpx;
						height:20rpx;
						border-radius: 50%;
						background: red;
					}
				}
				.iconxiaoxi{
					font-size: 50rpx;
					color:#fff;
				}
			}
			.user-msg{
				.avatar{
					width: 120rpx;
					height:120rpx;
					border-radius: 50%;
					border:4rpx solid white;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.tel{
					font-size: 34rpx;
					font-weight: bold;
					color:white;
					margin-left: 15rpx;
				}
			}
			.top-bottom{
				margin-top: 40rpx;
				text-align: center;
				.h3{
					font-size: 34rpx;
					color:white;
					font-weight: bold;
				}
				.p{
					font-size: 20rpx;
					color:#ccc;
					opacity: .8;
				}
			}
		}
		.card{
			width: 700rpx;
			border-radius: 10rpx;
			background: white;
			margin: 24rpx auto 0;
			padding: 0 30rpx ;
			box-sizing: border-box;
			.title{
				height: 70rpx;
				font-size: 30rpx;
				border-bottom: 2px solid #eee;
			}
			.orders{
				padding: 20rpx 0;
				.order-item{
					text-align: center;
					.iconfont{
						font-size: 45rpx;
						color:#000000;
					}
					.p{
						font-size: 26rpx;
					}
				}
			}
			.tools{
				flex-wrap: wrap;
				.tool-item{
					width: 25%;
					text-align: center;
					padding: 30rpx 0;
					.iconfont{
						font-size: 45rpx;
						color:#000000;
					}
					.p{
						font-size: 26rpx;
					}
				}
			}
			
		}
	}
</style>
